<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>
<style>
    body {
        user-select: none;
    }

    input {
        outline: none;
    }

    select {
        outline: none;
    }
</style>

<body>
    <!-- 
        收集表单数据：
        若：<input type="text"> 则v-model收集的是value的值，用户输入为value值
        若：<input type="radio"> 则v-model收集的是value的值，且给标签配置value值
        若：<input type="checkbox"> 
            1.则v-model收集的是value的值，那么收集的是checked （勾选 or 未勾选 是布尔值）
            2.配置input的value值：
                （1）v-model的初始值是非数组，那么收集的就是checked （勾选 or 未勾选 是布尔值）
                （2）v-model的初始值是数组，那么收集的就是value组成的数组
            备注：v-model三个修饰符
                lazy：失去焦点收集数据
                number：输入字符串转为有效数组
                trim：输入首位空格过滤

     -->
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号：</label>
            <input type="text" id="demo" v-model.trim="userInfo.account"> <br>
            <label for="pass">密码：</label>
            <input type="password" id="pass" v-model="userInfo.password"><br>
            <label for="age">年龄：</label>
            <input type="text" id="age" v-model.number="userInfo.age">
            性别：
            <label for="sex">男</label>
            <input type="radio" name="sex" id="sex" v-model="userInfo.sex" value="male">
            <label for="hobby">女</label>
            <input type="radio" name="sex" id="nv" v-model="userInfo.sex" value="female"> <br>
            爱好：
            <label for="cy">抽烟</label>
            <input type="checkbox" name="hobby" v-model="userInfo.hobby" id="cy" value="cy">
            <label for="hj">喝酒</label>
            <input type="checkbox" name="hobby" v-model="userInfo.hobby" id="hj" value="hj">
            <label for="tt">烫头</label>
            <input type="checkbox" name="hobby" v-model="userInfo.hobby" id="tt" value="tt"> <br>
            所属校区：
            <select v-model.lazy="userInfo.city">
                <option value="" selected>请选择校区</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select> <br>
            其他信息：
            <textarea v-model="userInfo.msg"></textarea> <br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="javascript:;">《用户协议》</a><br>
            <button>提交</button>
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        data: {
            userInfo: {
                account: '',
                password: '',
                sex: 'female',
                hobby: [],
                city: '',
                msg: '',
                agree: '',
                age: ''
            }
        },
        methods: {
            demo() {
                // console.log(JSON.stringify(this._data))
                console.log(this.userInfo);
            }
        }
    }).$mount('#root')
</script>

</html>